<template>
  <div class="map-wrapper">
    <Navbar :title="'路线查找'" />

    <div id="panel"></div>
    <div
      style="
        position: fixed;
        height: 40px;
        left: 10px;
        width: 100%;
        z-index: 999;
        display: flex;
      "
    >
      <!-- <el-input v-model="searchText" placeholder="请输入搜索关键字" id="searchInputId"/> -->
      <!-- <el-input v-model="startName" style="margin-right: 10px" placeholder="起始地点"></el-input> -->
      <el-input
        id="end"
        v-model="endName"
        style="margin-right: 10px; height: 30px"
        placeholder="目的地点"
      ></el-input>
      <el-select v-model="rule">
        <el-option
          v-for="item in routeRules"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          placeholder="请选择驾车算路策略"
        />
      </el-select>
      <el-button @click="goView" style="margin-left: 10px">搜索</el-button>
    </div>

    <div id="amap"></div>
    <!-- 内容超出显示滑轮 -->
    <div
      style="
        height: 100px;
        width: 100%;
        margin-top: 10px;
        /* position: absolute; */
        /* top: 100px; */
        z-index: 9999;
        border: 1px springgreen solid;
        background-color: white;
        overflow-y: scroll;
      "
      v-if="routeArr.length > 0"
    >
      路线规划策略： {{ policy }}
      <el-row v-for="(item, index) in routeArr" :key="index">
        {{ item.instruction }}
      </el-row>
    </div>
    <!-- <div class="draw-area">
        <div class="select">
          <div style="margin: 10px 0">
            <el-button @click="drawOther">绘制多边形</el-button>
            <el-button @click="drawRect">绘制矩形</el-button>
            <el-button @click="drawCircle">绘制圆形</el-button>
            <el-button @click="stopDrawAndClear()">清除</el-button>
          </div>
        </div>
      </div> -->
  </div>
</template>
  
  <script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import logo from "@/assets/vue.svg";
import { useRoute } from "vue-router";
import Navbar from "./component/Navbar.vue";

const route = useRoute();
// 判断数据的类型

window._AMapSecurityConfig = {
  // securityJsCode: "d7b486a6164fab9faee5a9ec1ba12c6a",
  securityJsCode: "2aa453b4ce611ae75cb6806c3f3fcb1d",
};
let map: any = null;
let placeSearch,
  AMapObj: any,
  geocoder: {
    getAddress: (arg0: any, arg1: (status: any, result: any) => void) => void;
  };
let mouseTool: any = null;
let circleId = 1;
let auto = ref("");
let autoOptions = {
  input: "end",
};
let searchText = ref("");
let startName = ref("四川保健院北苑");
let endName = ref(route.query.address ? route.query.address : "成都大学");
let rule = ref("");

const routeRules = [
  {
    value: 0,
    label: "速度优先",
  },
  {
    value: 1,
    label: "费用优先",
  },
  {
    value: 2,
    label: "距离优先",
  },
  {
    value: 41,
    label: "躲避拥堵＋少收费",
  },
  {
    value: 32,
    label: "默认",
  },
];

let routeArr = ref([]);
let policy = ref("");

onMounted(() => {
  initMap();
  setTimeout(() => {
    goView();
  }, 1000);
});

async function initMap() {
  await AMapLoader.load({
    // key: "f8cc8bca3b3a61374f1b0d27f0f51879",
    key: "28b44eefb4b8c13fa4e47b94d38ba3df",
    version: "2.0",
    plugins: [
      "AMap.ToolBar", //通过工具条实现地图的缩放，平移
      "AMap.Scale", //通过比例尺显示地图的级别
      "AMap.Geolocation", //通过高德定位SDK实现定位
      "AMap.PlaceSearch", //通过输入关键字进行城市搜索
      "AMap.Geocoder", //通过地理编码和逆地理编码
      "AMap.HawkEye", //鹰眼
      "AMap.MapType", //通过图层切换控件实现2D/3D切换
      "AMap.CircleEditor", 
      "AMap.MouseTool", //
      "AMap.AutoComplete", //输入提示
      "AMap.Driving", //驾车路径规划
    ],
  }).then((AMap) => {
    AMapObj = AMap;
    map = new AMap.Map("amap", {
      zoom: 15,
      resizeEnable: true,
      /**
       * 创建AMap.Map对象时如果没有传入center参数
       * 地图也会自动定位到您所在城市并显示，这就是JS API的初始加载定位：无需传入对应参数就能获取大致的定位信息
       * 但是当写了center参数，那么地图也会显示到您传入的center参数对应的位置
       */
      center: [116.397428, 39.90923],
      viewMode: "3D",
    });

    // 自定义图层
    let imageLayer: any = null;
    let layers = [];
    let bounds = new AMap.Bounds(
      [103.691881, 36.487252], //左下角
      [103.716512, 36.500069] //右上角
    );
    // 图片地图配置
    imageLayer = new AMap.ImageLayer({
      url: "src/assets/ls-bg.png",
      bounds,
      zoom: 15, //级别
    });

    layers.push(imageLayer);
    // 添加自定义图层
    map.add(layers);

    // 图层切换
    const mapType = new AMap.MapType();
    // 鹰眼
    const hawkEye = new AMap.HawkEye();
    // 缩放条
    const toolbar = new AMap.ToolBar({
      position: "LT",
    });
    // 比例尺
    const scale = new AMap.Scale();
    // 定位
    const geolocation = new AMap.Geolocation({
      enableHighAccuracy: true, //是否使用高精度定位，默认:true
      timeout: 10000, //超过10秒后停止定位，默认：无穷大
      maximumAge: 0, //定位结果缓存0毫秒，默认：0
      convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
      showButton: true, //显示定位按钮，默认：true
      // buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
      buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
      showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
      showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
      panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
      zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
    });
    geocoder = new AMap.Geocoder({
      city: "全国",
    });
    map.addControl(geolocation); // 定位组件
    map.addControl(toolbar); // 放大缩小组件
    map.addControl(scale); // 比例尺
    map.addControl(hawkEye); // 鹰眼
    map.addControl(mapType); // 图层切换

    poiSearch();

    bindEvent();

    // 点标记
    createMarker();

    // 覆盖物
    mouseTool = new AMap.MouseTool(map); //创建鼠标工具插件实例

    // 区域高亮
    var distProvince = new AMap.DistrictLayer.Province({
      zIndex: 10, //设置图层层级
      zooms: [2, 15], //设置图层显示范围
      adcode: "620000", //设置行政区 adcode 所有省份的adcode前往utils/adcode.txt查看
      depth: 0, //设置数据显示层级，0：显示国家面，1：显示省级，当国家为中国时设置depth为2的可以显示市一级
    });

    // 设置行政区图层样式
    distProvince.setStyles({
      "stroke-width": 2, //描边线宽
      "province-stroke": "#ff714d", //描边颜色
      fill: "rgba(0,0,0,0.3)",
    });
    map.add(distProvince);
  });
}

// 搜索
const poiSearch = () => {
  auto.value = new AMapObj.AutoComplete(autoOptions);
  const placeSearch = new AMapObj.PlaceSearch({
    map: map,
    city: "", // 减小搜索范围至某个城市
    pageSize: 5, // 单页显示结果条数
    pageIndex: 1, // 页码
    citylimit: false, // 是否强制限制在设置的城市内搜索
    autoFitView: true,
    panel: "panel", // 结果列表将在此容器中进行展示。出不来时设置样式z-inde: 999
  });
  auto.value.on("select", function (e: any) {
    //针对选中的poi实现自己的功能
    placeSearch.search(e.poi.name);
  });
};

// 鼠标双击事件
const doubleClick = (e: any) => {
  console.log(
    "您在 [ " +
      e.lnglat.getLng() +
      "," +
      e.lnglat.getLat() +
      " ] 的位置双击了地图！"
  );
  const x = e.lnglat.getLng();
  const y = e.lnglat.getLat();
  showInfo(e, x, y);
};

// 鼠标移动事件
const showInfoMove = () => {
  console.log("您移动了您的鼠标！");
};

// 鼠标点击事件
const signClick = (e: any) => {
  console.log(
    "您在 [ " +
      e.lnglat.getLng() +
      "," +
      e.lnglat.getLat() +
      " ] 的位置单击了地图！"
  );
  const x = e.lnglat.getLng();
  const y = e.lnglat.getLat();
  showInfo(e, x, y);
};

// 地图事件绑定
const bindEvent = () => {
  console.log("事件绑定成功");
  map.on("click", signClick);
  // map.on('dblclick', doubleClick);
  // map.on('mousemove', showInfoMove);
};

// 信息窗体
const showInfo = (e: any, x: any, y: any) => {
  geocoder.getAddress(e.lnglat, (status, result) => {
    if (status === "complete" && result.regeocode) {
      console.log("获取地址成功",111111111);
      const address = result.regeocode.formattedAddress;
      const infoContent = `
          <div style="padding:7px 0px 0px 0px;">
            <div class="global-header">当前位置</div>
            <p class='input-item'>经度: ${x}</p>
            <p class='input-item'>纬度: ${y}</p>
            <p class='input-item'>地址: ${address}</p>
            <img src="${logo}" alt="Vue Logo" width="100px;height=100px"/>
          </div>
        `;
      const infoWindow = new AMapObj.InfoWindow({
        content: infoContent,
      });
      infoWindow.open(map, new AMapObj.LngLat(x, y));
    } else {
      console.error("获取地址失败");
    }
  });
};

// 创建点标记
const createMarker = () => {
  //  点标记
  const markerContent = `<div class="custom-content-marker">
              <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
              <div class="close-btn">X</div>
            </div>`;
  const position = new AMapObj.LngLat(103.841856, 36.053549); //Marker 经纬度
  const marker = new AMapObj.Marker({
    position: position,
    content: markerContent, //将 html 传给 content
    offset: new AMapObj.Pixel(-13, -30), //以 icon 的 [center bottom] 为原点
  });
  // 添加点标记
  map.add(marker);
  // 未关闭按钮添加点击事件
  const closeBtn = document.querySelector(".close-btn");
  if (closeBtn) {
    closeBtn.addEventListener("click", () => {
      clearMarker(marker); // 移除 marker
    });
  }
};

// 移除点标记
const clearMarker = (marker: any) => {
  console.log("移除点标记");
  map.remove(marker); //清除 marker
};

/**
 * 停止绘制
 * 形参为true时，清除所有绘制的覆盖物
 * 形参为false时，仅仅停止绘制，不会清除覆盖物
 */
const stopDrawAndClear = () => {
  mouseTool.close(true);
};

let carMarker: {
  setMap: (arg0: any) => void;
  setPosition: (arg0: any) => void;
} = null; // 用于存储当前的车辆标记
let polyline: { setMap: (arg0: any) => void } = null; // 用于存储当前的路线
let intervalId: string | number | NodeJS.Timeout = null; // 用于存储当前的定时器ID

const goView = () => {
  let status1=Number(route.query.status)
  // 清除之前的车辆标记和路线
  if (carMarker) {
    carMarker.setMap(null);
    carMarker = null;
  }
  if (polyline) {
    polyline.setMap(null);
    polyline = null;
  }

  // 清除之前的定时器
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }

  // 创建驾车路线规划对象
  const driving = new AMapObj.Driving({
    map,
    policy: rule.value, // 路线策略
  });

  const points = [
    { keyword: startName.value, city: "四川保健院北苑" },
    { keyword: endName.value, city: "四川康桥医院" },
  ];

  driving.search(points, (status, result) => {
    if (status === "complete") {
      // 获取路线数据
      const route = result.routes[0];
      routeArr.value = route.steps;
      policy.value = route.policy;

      // 绘制路线
      const path = route.steps.reduce((acc, step) => acc.concat(step.path), []);
      polyline = new AMapObj.Polyline({
        path: path,
        strokeColor: "#3366FF",
        strokeWeight: 6,
        map: map,
      });

      // 创建小车标记
      carMarker = new AMapObj.Marker({
        map: map,
        position: path[0], // 初始位置
        icon: "https://webapi.amap.com/images/car.png", // 小车图标
        offset: new AMapObj.Pixel(-16, -32),
      });

      // 根据状态设置车辆位置

      if (status1 === 5) {
        console.log('车定位到路线的末尾');
        // 状态为5，车定位到路线的末尾
        carMarker.setPosition(path[path.length - 1]);
      } else if (status1 === 2) {
        console.log('车定位到路线开头');
        // 状态为2，车定位到路线开头
        carMarker.setPosition(path[0]);
      } else if (status1 === 4) {
        console.log('车在中间行驶中');
        // 状态为4，车在中间行驶中
        let currentIndex = Math.floor(path.length / 2); // 假设车在中间位置
        carMarker.setPosition(path[currentIndex]);

        // 模拟小车行驶
        intervalId = setInterval(() => {
          if (currentIndex < path.length - 1) {
            currentIndex++;
            carMarker.setPosition(path[currentIndex]);
          } else {
            clearInterval(intervalId);
            intervalId = null;
          }
        }, 1); // 每1毫秒移动一次
      }
    }
  });
};

onUnmounted(() => {
  map?.destroy();
});
</script>
  
  
  <style scoped lang="scss">
.map-wrapper {
  overflow: hidden;
  margin-top: 46px;
  #amap {
    width: 100%;
    height: 70vh;
    margin-top: 30px;
  }
}

#panel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}

.draw-area {
  position: absolute;
  bottom: 10px;
  right: 200px;
  display: flex;
  justify-content: center;

  .select {
    background-color: white;
    padding: 0 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .action {
    display: flex;
    align-items: center;
  }
}
</style>
  